<template>
    <div class="comment">
        <div class="comment-top">
            <img @click="$router.push({name:'index'})" src="../image/saoma_icon_fanhui.png" alt="" class="comment-pic">
            <img src="../image/shouyedianping_icon_pgoto.png" class="img1" alt="">
        </div>
        <div class="comment-main">
            <div class="comment-main-pic">
                <img src="../image/shouyedianping_icon_touxiang.png" alt="">
                <div><h2>白糖拌兔码头</h2>
                <p>中性·泛红·敏感</p></div>
                <img src="../image/shouedianping_icon_huizhang.png" class="hz" alt=""  >
            </div>
            <img src="../image/shouyedianping_icon_xin.png" alt="">
            
        </div>
    <p>总体:&nbsp;&nbsp;<van-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/></p>
            <p>使用感:&nbsp;&nbsp;5.0&nbsp;&nbsp;有效度:&nbsp;&nbsp;5.0&nbsp;&nbsp;温和度:&nbsp;&nbsp;5.0</p>
            <p>是否会回购:&nbsp;&nbsp;会回购</p>
            <div class="comment-footer">
                <img src="../image/shouyedianping_icon_photo.png" alt="">
            </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            value:5
        }
    }
}
</script>

<style lang="scss" scoped>
    .comment{
        width: 750px;
        height: 1624px;
        .comment-footer{
            margin-left: 20px;
            margin-top: 43px;
            margin-bottom: 68px;
            width: 710px;
            height: 434px;
            img{
                width: 100%;
            }
        }
        p{
            margin-left: 52px;
            margin-bottom: 16px;
            font-size: 28px;
            
        }
        .comment-main{
                position: relative;

            // height: 437px;

            // background: red;
             display: flex;
                justify-content: space-between;
                // margin-left: 31px;
                align-items: center;
                img{
                    width: 30px;
                    height: 26px;
                    margin-right: 31px;
                }
            .comment-main-pic{
                width: 330px;
                // text-align: center;
                display: flex;
                justify-content: space-between;
                // align-items: center;
                margin-left: 26px;
                .hz{
                    width:436px;
                    height:435px;
                    position: absolute;
                    right: -40px;
                    top:-110px
                }
                img{
                    margin-right: 24px;
                    width: 130px;
                    margin-bottom: 42px;
                    height: 130px;
                }
                div{
                    margin-top: 36px;
                }
                h2{
                    width: 180px;
height: 42px;
font-size: 30px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
                }
                p{
                    margin-left: 0;
                    width: 140px;
height: 28px;
font-size: 20px;
font-family: PingFang SC-Light, PingFang SC;
font-weight: 300;
color: #000000;
                }
            }
        }
        .comment-top{
            width: 750px;
            height: 685px;
            margin-bottom: 69px;
            // background-image: url(./image/shouyedianping_icon_pgoto.png);
            .comment-pic{
                position: absolute;
                margin-top: 109px;
                margin-left: 29px;
                width: 24px;
                height: 44px;
            }
            .img1{
                width: 750px;
                height: 685px;
            }
        }
    }


</style>

